<h1>底部Tab区域设置</h1>
<div class="row">
  <span class="label">组件名</span>
  <input nz-input placeholder="字母数字下划线组成，用于锚点" [disabled]="componentNameDisabled" [(ngModel)]="componentData.name"/>
</div>
<div class="row">
  <span class="label required">背景色</span>
  <input nz-input type="color" [(ngModel)]="componentData.bgColor"/>
</div>
<!--<div class="row">-->
<!--  <span class="label">上边距</span>-->
<!--  <input nz-input placeholder="请输入上边距" [(ngModel)]="componentData.marginTop"/>-->
<!--</div>-->
<!--<div class="row">-->
<!--  <span class="label">下边距</span>-->
<!--  <input nz-input placeholder="请输入下边距" [(ngModel)]="componentData.marginBottom"/>-->
<!--</div>-->

<nz-divider></nz-divider>
<div class="contentList">
  <div cdkDropList (cdkDropListDropped)="drop($event)">
    <div *ngFor="let item of componentData.content;let index = index" cdkDragBoundary=".contentList"
         style="display: flex;flex-direction: row;margin-bottom: 8px;background: white;min-height: 108px"
         [ngStyle]="{marginBottom: componentData.content.length===index+1?'0':'8px'}"
         cdkDrag>
      <app-image-upload style="width: 100px;display: inline-block"
                        [maxImgLength]="1"
                        [imageUrl]="item['image']"
                        (deleteImg)="item['image']=''"
                        (urlChange)="item['image']=$event"></app-image-upload>
      <div>
        <div class="row" style="margin-bottom: 0">
          <span class="label" style="width: 40px">链接</span>
          <nz-select nzShowSearch nzAllowClear nzPlaceHolder="请选择链接" [(ngModel)]="item['link']">
            <nz-option *ngFor="let option of linkList" [nzLabel]="option['name']" [nzValue]="option['key']"></nz-option>
          </nz-select>
        </div>
        <div class="linkRemark" [nzTooltipTitle]="linkToRemark(item['link'])" nzTooltipPlacement="top" nz-tooltip>
          {{linkToRemark(item['link'])}}
        </div>
        <div class="row">
          <span class="label" style="width: 40px">参数</span>
          <input nz-input placeholder="多个参数用@分隔" [(ngModel)]="item['params']"/>
        </div>
      </div>
      <button nzSize="small" nzDanger nz-button nzType="default"
              style="margin-left: 8px;align-self: center"
              nz-popconfirm
              nzPopconfirmTitle="确认要删除吗"
              (nzOnConfirm)="removeItem(index)"
              nzPopconfirmPlacement="left">
        <i nz-icon nzType="delete"></i>
      </button>
    </div>
  </div>
</div>

<div>
  <button nzSize="large" style="width: 100%;margin-top: 24px" nz-button nzType="default" (click)="addItem()">
    <i nz-icon nzType="plus"></i>
  </button>
</div>

<div class="footer">
<!--  <div style="display: flex;justify-content: space-evenly">-->
<!--    <button nz-button nzType="default" (click)="closeComponent.emit()">关闭</button>-->
<!--    <button nz-button nzType="primary" (click)="saveBtn()">保存</button>-->
<!--  </div>-->
  <div class="remark">
    <pre>
      规则说明：
      1.该组件和单行图片组件唯一的区别就是会被固定在底部。
      2.该组件在pc端/web端无效。
      3.该组件每个页面最多存在1个。
    </pre>
  </div>
</div>
